<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% String title = "信息综合系统"; %>
<%@ include file="/WEB-INF/jsp/header.jsp" %>
<title><%=title %>-基础库管理</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-itunes-app" content="app-id=429849944"/>
<meta name="apple-touch-fullscreen" content="no"/>
<meta content="telephone=no" name="format-detection"/>
<meta name="apple-mobile-web-app-capable" content="no"/>
</head>

<!-- 根据不同的终端显示不同的页面
<script type="text/javascript">
    function urlredirect() {
        var sUserAgent = navigator.userAgent.toLowerCase(); 
        if ((sUserAgent.match(/(ipod|iphone os|midp|ucweb|android|windows ce|windows mobile)/i))) {
            var thisUrl = window.location.href;
            window.location.href = thisUrl.substr(0,thisUrl.lastIndexOf('/')+1)+'mobpage/'; //跳转为网址后面加mobile的路径
        }
    }
urlredirect();
</script>
-->

<body class="fixed-top" style="background: #fff;" onload="loadQueryDIV()">
  <div class="container-fluid">
       <!-- BEGIN PAGE HEADER 头部-->
       <div class="row-fluid">
           <div class="span12">
               <ul class="breadcrumb" style="padding-bottom : 12px;background: #fff;">
                   <li>
                   <a href="${pageContext.request.contextPath}/user/index.do">
                   		<i class="icon-angle-left"></i>
						<i class="icon-angle-left"></i> &nbsp;&nbsp;
                   		首页控制台</a>
                       <span class="divider">/</span></li>
                   <li class="active">基础库管理</li>
                   <li class="pull-right search-wrap" >
	                   <!-- <button
						 onclick="toggleCondi();" 
						 class="btn dropdown-toggle" data-toggle="dropdown">
						<span id="but_text">隐藏筛选区域</span> 
						<i id="toggleCondi_i" class="icon-angle-up"></i>
						</button>
						&nbsp;&nbsp; -->
					
                       <div class="btn-group pull-right" >
		                 <button class="btn dropdown-toggle" data-toggle="dropdown">更多 
		                 	<i class="icon-angle-down"></i>
		                 </button>
		                 <ul class="dropdown-menu pull-right">
		                     <li><a href="${pageContext.request.contextPath}/basis/download.do">下载已筛选的记录</a></li>
		                     <li><a href="#" onclick="openUpload('基础库');">Excel批量上传N条</a></li>
		                     <li><a href="#" onclick="showOpen(0,'新增');">页面新增一条</a></li>
		                     <li><a href="#" onclick="deleteById();">页面通过Id删除N条</a></li>
		                 </ul>
		                 
             		   </div>
                   </li>
               </ul>
           </div>
       </div>
       <!-- 查询条件 -->
		<div class="row-fluid">
            <div class="span12" id="query_canvas-wrap">
               <div class="widget gray">
                   <div class="widget-title">
                       <h4><i class="icon-reorder"></i>
                     	  查询条件
                       </h4>
                       <span class="tools">
							<a href="javascript:;" onclick="up_down_active()" id="query_id" class="icon-chevron-down"></a>
					   </span>
                   </div>
                   <div class="widget-body" id="query_div" style="background: #FCFCFC;display:none;">
	                   <div class="clearfix" >
		               	<form method="post" id="filterForm">
		                   <input type="text" class="span2" id="basisId" name="id"
		                   		ondblclick="clearText('basisId')"
		                   		onMouseOver="this.title='请填写ID'"
		                   		placeholder="请填写ID" />
		
		                   <input type="text" class="span2 typeahead" id="mgr" name="mgr"
		                   		onMouseOver="this.title='请填写经理'"
		                   		ondblclick="clearText('mgr')"
		                   		placeholder="请填写经理" data-provide="typeahead"
		                        data-items="4"/>
		                          
		                   <select id="daqu" size="1" name="daqu" multiple="multiple"
		                   		class="input-medium m-wrap">
		                       <c:forEach items="${condiMap.province}" var="province" varStatus="status ">
		                           <option value="${province}">${province}</option>
		                       </c:forEach>
		                   </select>
		
		                   <select id="space" size="1" name="space" multiple="multiple"
		                   		class="input-medium m-wrap">
		                       <c:forEach items="${condiMap.space}" var="space" varStatus="status">
		                           <option value="${space}">${space}</option>
		                       </c:forEach>
		                   </select>
		
		                   <select id="province" size="1" name="province" multiple="multiple"
		                   		class="input-medium m-wrap">
		                       <c:forEach items="${provinces}" var="shenfen" varStatus="status">
		                           <option value="${shenfen}">${shenfen}</option>
		                       </c:forEach>
		                   </select>
		
		                   <select id="city" size="1" name="city" multiple="multiple"
		                   	   class="input-medium m-wrap">
		                       <c:forEach items="${citys}" var="city" varStatus="status">
		                           <option value="${city}">${city}</option>
		                       </c:forEach>
		                   </select>
		
		                   <select id="county" size="1" name="country" multiple="multiple"
		                   		class="input-medium m-wrap">
		                       <c:forEach items="${countrys}" var="country" varStatus="status">
		                           <option value="${country}">${country}</option>
		                       </c:forEach>
		                   </select>
		                   
		                   <input type="button" id="seach" name="seach" value="查询" class="btn  btn-primary"
		                          style="margin-bottom: 10px;"
		                          onclick="query(pNumber,pSize);"/>
		                   <input type="reset" id="reset" name="reset" value="重置该页面" class="btn  btn-primary"
		                    style="margin-bottom: 10px;" onclick="resetf();"/>
		        		 </form>
              	 </div>
                   
                   </div>
              	 </div>
           	</div>
       	</div>
       	
       
       <div class="widget" >
           <div class="purple">
           <!-- 通过id删除 -->
           <div id="deleteDiv" hidden>
                    <div class="modal-body" > 
                    	请输入要删除的ID:<input type="text" class="span5" name="idD" style="padding:13px 5px;" id = "idD" value="" placeholder="多个ID用空格隔开"/>
                     </div> 
                </div>
                
           <!-- 错误提示 -->
           <div id="errorInfoDiv" hidden="hidden">
				<table class="table table-striped table-hover table-bordered" style="font-size:11px;color:red;width:750px;margin:12px;">
				<thead>
					<tr>
						<td><b>出错行号</b></td>
						<td><b>出错标题</b></td>
						<td style="color:#479DA4;"><b>参考标准提示</b></td>
						<td><b>错误字段</b></td>
					</tr>
					</thead>
					<tbody id="error-body"></tbody>
				</table>
		  </div>
          
          <!-- 新增、更新 表单 -->
          <div id="form_div" hidden>
               <div class="modal-body" style="height: 90%">
               <form method="post" id="submitForm">
                   <input id="idU"  name="id" hidden="hidden"/>
                   <span style="color:red;">*</span>&nbsp;请填写经理:
                   <input type="text" class="span2 typeahead noNull" name="mgr" 
                   			style="width:100px;" id="mgrU" placeholder="请填写经理" 
                   			data-provide="typeahead"
                         	data-items="4"/>
                   <span style="color:red;">*</span>&nbsp;<p style="display: inline">请选择大区：</p>
                   <select id="daquU" class="input-medium m-wrap noNull" name="daqu">
                   	   <option value=""></option>	
                       <c:forEach items="${condiMap.province}" var="province" varStatus="status">
                           <option value="${province}">${province}</option>
                       </c:forEach>
                   </select>
                   <span style="color:red;">*</span>&nbsp;<p style="display: inline">请选择片区：</p>
                   <select id="spaceU" size="1" class="input-medium m-wrap noNull" name="space">
                   	   <option value=""></option>	
                       <c:forEach items="${condiMap.space}" var="space" varStatus="status">
                           <option value="${space}">${space}</option>
                       </c:forEach>
                   </select>
                   </br>
                   <span style="color:red;">*</span>&nbsp;<p style="display: inline">请选择省份：</p>
                   <select id="provinceU" size="1" class="input-medium m-wrap noNull" name="province">
                      <option value=""></option>	
                       <c:forEach items="${condiMap.shengfen}" var="shenfen" varStatus="status">
                           <option value="${shenfen}">${shenfen}</option>
                       </c:forEach>
                   </select>
                   <span style="color:red;">*</span>&nbsp;<p style="display: inline">请选择地市：</p>
                   <input type="text" class="span2 typeahead noNull" 
                   			name="city" style="width:100px;" id="cityU" 
                   			placeholder="请填写地市" data-provide="typeahead"
                            data-items="4"/>
                   <span style="color:red;">*</span>&nbsp;<p style="display: inline">请选择区县：</p>
                   <input type="text" class="span2 typeahead noNull" 
                   			name="country" style="width:100px;" id="countyU" 
                   			placeholder="请填写区县" data-provide="typeahead"
                          	data-items="4"/>               
                   </br>
                   <p style="display: inline">请选择分组标识：</p>
                   <select id = "productU"  size="1" name="product" class="input-medium m-wrap">
                       <option value=""></option>
                       <option value = "Rx" >Rx</option>
                       <option value = "OTC" >OTC</option>
                       <option value = "A" >A</option>
                       <option value = "Y" >Y</option>
                       <option value = "Z" >Z</option>
                       <option value = "T1" >T1</option>
                       <option value = "T2" >T2</option>
                       <option value = "T3" >T3</option>
                       <option value = "T4" >T4</option>
                   </select>
                   </form>
               </div>
           </div>
           
           <!-- 文件上传 -->
           <div id="uploadFileForm" hidden>
               <div class="modal-body" >
                    <form action="${pageContext.request.contextPath}/basis/upload.do"
							method="post" id="uploadForm" enctype="multipart/form-data">
								点击该按钮选择文件:<input type="file" name="excelFile" multiple="multiple"
									class="input-medium" id="file"><br/>
					</form>
                </div>
            </div>

			<!-- list查询列表 -->
			<div class="row-fluid">
            	<div class="span12">
                <!-- BEGIN ALERTS PORTLET-->
               <div class="widget blue">
                   <div class="widget-title">
                       <h4><i class="icon-reorder"></i>
	                       	<a href="javascript:;" onclick="scrollToLeft();" title="定位到表格最左端" style ="color:white;">最左</a>
			                <a href="javascript:;" onclick="scrollToCenter();" title="定位到表格正中间" style ="color:white;">居中</a>
			                <a href="javascript:;" onclick="scrollToRight();" title="定位到表格最右端" style ="color:white;">最右</a>
                            <a href="javascript:;" id="getProp" style ="color:white;margin-left:0px;">复制</a>
                       </h4>
                       <span class="tools">
							<a href="javascript:;" class="icon-chevron-down"></a>
					   </span>
                   </div>
                   <div class="widget-body" style="overflow:auto" id="canvas-wrap">
                   
                   <table class="table table-striped table-hover table-bordered" width="640px;"
                     	style="table-layout:fixed">
                          <thead>
	                          <tr>
                              	<th style="width:15px;">
                              	<input type="checkbox" name="choiceAll" value="all" 
                              		id ="allAndNotAll" onclick="allAndNotAll(this,'basis');"/>
                              	</th>
                              	<th width="50px">id</th>
	                         	<th width="60px">经理</th>
	                         	<th width="70px">大区</th>
	                         	<th width="70px">片区</th>
	                         	<th width="70px">省份</th>
	                         	<th width="90px">地市</th>
	                         	<th width="70px">区县</th>
	                         	<th width="50px">分组标识</th>
	                         	<th width="100px">录入日期</th>
	                         	<th width="70px">录入人员</th>
		                     </tr>
                          </thead>
                        <tbody id="distribute-body">
                 		</tbody>
                   </table>
                   <div class="pageBottom" style="text-align:center;">
                        <!-- 分页条 -->
                        <div id="callBackPager" class="paging_bootstrap pagination"></div> 
                   </div>
                  </div>
              	 </div>
           		</div>
       		</div>
		</div>
	</div>
</div>

<!-- 页面模板基本js -->
<script src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.nicescroll.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/js/fullcalendar.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/Chart.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.scrollTo.min.js"></script>
<script src="${pageContext.request.contextPath}/js/common-scripts.js"></script>

<!-- layer -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layer/layer.js"></script>
<!-- 下拉多选，过滤-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-multiselect.css" type="text/css"/>
<!-- 自动补全 -->
<script src="${pageContext.request.contextPath}/js/bootstrap-typeahead.js" type="text/javascript" ></script>
<!-- 分页 -->
<script src="${pageContext.request.contextPath}/js/extendPagination.js" type="text/javascript" ></script>
<!-- 复制 -->
<script src="${pageContext.request.contextPath}/js/jquery.zclip.min.js" type="text/javascript" ></script>

<!-- 页面查询条件初始化 -->
<script type="text/javascript">
//查询条件   下拉多选，并过滤 数据源填充 会花点时间，故需要先加载页面，后填充数据
$(document).ready(function () {
	selectMoreItem('daqu','请选择大区','110px');
	selectMoreItem('space','请选择片区','110px');
	selectMoreItem('city','请选择地市','110px');
	selectMoreItem('county','请选择区县','110px');
	selectMoreItem('province','请选择省份','110px');
    
  	//自动补全 数据源填充
    var mgr = ${condiMap.mgr};
    $('#mgr').typeahead({source: mgr});
});

//延时加载查询框
function loadQueryDIV(){
	setTimeout($("#query_div").slideDown(),500);
}
</script>

<!--查询list -->
<script type="text/javascript">
    function query(pageNumber, pageSize) {
    	var url = "${pageContext.request.contextPath }/basis/selectForList.do?pageNumber="
			+ pageNumber + "&pageSize=" + pageSize;
    	var params = $("#filterForm").serialize();
    	queryList(url,params);
    }

    //给table 赋值动态数据
    function createTable(currPage, limit, total, items) {
        var html = [], showNum = limit;
        if (total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
        for (var i = 0; i < showNum; i++) {
            html.push("<tr ondblclick=\"showOpen('"+items[i].id+"','修改')\" >");
            html.push('<td><input type="checkbox" name="choice" value="'+items[i].id+'"/></td>');
            html.push('<td>' + formatData(items[i].id) + '</td>');
            html.push('<td>' + formatData(items[i].mgr) + '</td>');
            html.push('<td>' + formatData(items[i].daqu) + '</td>');
            html.push('<td>' + formatData(items[i].space) + '</td>');
            html.push('<td>' + formatData(items[i].province) + '</td>');
            html.push('<td>' + formatData(items[i].city) + '</td>');
            html.push('<td>' + formatData(items[i].country) + '</td>');
            html.push('<td>' + formatData(items[i].product) + '</td>');
            html.push('<td>' + formatData(items[i].today) + '</td>');
            html.push('<td>' + formatData(items[i].dataer) + '</td>');
            html.push('</tr>');
        }
        var mainObj = $('#distribute-body');
        mainObj.empty();
        mainObj.html(html.join(''));
    };
</script>

<!-- 新增、更新 -->
<script type="text/javascript">
	var htmls = $("#form_div").html();
    var ret = null;
    var open = false;
    function showOpen(id,type) {
        $("#form_div").remove();
        layer.open({
            title: [type+'<span style="color:red;font-size:12px;margin-left:10px;">*表示该项必填</span>', 'font-size:18px;'],
            type:1,
            content: htmls, //这里content是一个普通的String
            btn: ['确认', '取消'],
            yes: function(index, layero){
            	var ret = checkNull("submitForm");
				if (ret == "false") {
					open = true;
					return open;
				}
				//一点击确认就关闭对话框
	         	layer.closeAll();
	         	//加载等待框
	         	layer.load(2);
            	var action ="";
                if("新增"==type){
                	action = "${pageContext.request.contextPath }/basis/saveOrUpdate.do?flag=N";
                }else if("修改"==type){
                	action = "${pageContext.request.contextPath }/basis/saveOrUpdate.do?flag=E";
                }
                var params = $("#submitForm").serialize();
				sendRequest(action, params, function(result) {
					var code = result.code;
					if (code == -2) { //excel校验不通过
						open = true;
						errorInfo(result.msg);
					} else if (code == -1) { // 有错误
						layer.alert(result.msg);
					} else if (code > 0) {
						//查询方法里有关闭load(2)的方法
						query(pNumber, pSize);
						layer.alert(result.msg);
					}
				});
				return open;
            }
            ,cancel: function(){
            	layer.closeAll();
            }
            ,area: ['800px', '500px']
        });
        
        //修改时，异步回显数据
        if("修改"==type){
        	var url = "${pageContext.request.contextPath }/basis/selectByID.do";
			sendRequest(url,{"id" : id},function(result) {
				var code = result.code;
				var ret = result.msg;
				if (code > 0) {
					$("#idU").val(ret.id);
					$("#mgrU").val(ret.mgr);
		            $("#daquU").val(ret.daqu);
		            $("#provinceU").val(ret.province);
		            $("#cityU").val(ret.city);
		            $("#countyU").val(ret.country);
		            $("#spaceU").val(ret.space);
		            $("#productU").val(ret.product);
		          	//新增、更新界面的下拉多选过滤 
		            $("#daquU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择大区', enableFiltering: true, maxHeight: 300, buttonWidth: '166px'});
		        	$("#spaceU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择片区',enableFiltering: true, maxHeight: 300,buttonWidth: '125px'});
		        	$("#provinceU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择省份',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        	$("#productU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择分组标识',maxHeight: 300,buttonWidth: '150px'});
				}
			});
        } else {
        	//新增、更新界面的下拉多选过滤 
         	var url = "${pageContext.request.contextPath }/register/nothing.do";
    		sendRequest(url,null,function(result) {
    			var code = result.code;
    			var ret = result.msg;
    			if (code > 0) {
    				 //新增、更新界面的下拉多选过滤 
    	        	 $("#daquU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择大区', enableFiltering: true, maxHeight: 300, buttonWidth: '166px'});
    	        	 $("#spaceU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择片区',enableFiltering: true, maxHeight: 300,buttonWidth: '125px'});
    	        	 $("#provinceU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择省份',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
    	        	 $("#productU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择分组标识',maxHeight: 300,buttonWidth: '150px'});
    			}
    		});
        }
    	
    	//新增、更新界面的自动补全 数据填充
    	var mgr = ${condiMap.mgr};
    	$("#mgrU").typeahead({source: mgr});
    	var city = ${condiMap.cityStr};
    	$("#cityU").typeahead({source: city});
    	var county = ${condiMap.countryList};
    	$("#countyU").typeahead({source: county});
    }
</script>

<script type="text/javascript">
function deleteById(){
	var deleteHtml = $("#deleteDiv").html();
	$("#deleteDiv").remove();
	layer.open({
	        title: ['删除基础库数据', 'font-size:18px;'],
	        type:1,
	        content: deleteHtml, // 这里content是一个普通的String
	        btn: ['删除', '取消'],
	        yes: function(index, layero){
	        	var ids = $("#idD").val();
	        	if(ids.trim().length<=0){
	        		layer.alert("ID不能为空！！！");
	        		return;
	        	}
	        	layer.confirm('确认要删除['+ids+']吗？', {
	                btn : [ '确认', '取消' ] //按钮
	            }, function(index) {
	                layer.close(index);
	                var url = "${pageContext.request.contextPath }/basis/delByIds.do"
	                sendRequest(url, {id:ids},function(result) {
	        			var code = result.code;
	        			if (code == -1) { // 有错误
							layer.alert(result.msg);
						} else if (code > 0) {
							layer.closeAll();
							layer.alert(result.msg);
							query(pNumber,pSize);
						}
	        		});
	            }); 
	        	
	        }
	        ,btn2: function(index, layero){
	        	layer.closeAll('loading');
	        }
	        ,cancel: function(){
	        	layer.closeAll('loading');
	        }
	        ,area: ['700px', '180px']
	    });

	$("#error-info").removeAttr("hidden");	
}
</script>
<script src="${pageContext.request.contextPath}/javascript/httpService.js"></script>
</body>
</html>